<template>
  <div id="app">
    <!-- Header 组件 -->
    <Header></Header>

    <!-- 路由 组件 -->
    <!-- 判断当前的路由组件是否需要被缓存 -->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>

    <!-- Footer 组件 -->
    <!-- 根据页面路由设置只在home和search页面显示 footer -->
    <!-- v-show="$route.path === '/home' || $route.path === '/search'" -->
    <!-- 或者在路由上配置 meta: {show: true} 路由的meta属性为true则显示-->
    <Footer v-show="$route.meta.show"></Footer>
  </div>
</template>

<script>
import Header from '@/components/Header/header.vue'
import Footer from '@/components/Footer/footer.vue'
export default {
  // 发起ajax请求生命周期
  components: {
    Header,
    Footer
  },
  created() {
    // 通过vuex 调用 home 中的 nav组件 三级联动用到的数据请求
    this.$store.dispatch('navigationMenu')
    this.$store.dispatch('floor')
  }
}
</script>

<style>
#nprogress .bar {
  background: red !important;
}
</style>
